<template>
  <el-dialog
      v-model="centerDialogVisible"
      :title="formTitle"
      width="20%"
      destroy-on-close
      center
      @close="dialogClose">
    <el-input v-model="filterText" placeholder="请输入"/>
    <div style="height: 200px;overflow-y: auto;">
      <el-tree
          ref="treeRef"
          class="filter-tree"
          show-checkbox
          node-key="menu_id"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
      />
    </div>
    <div class="bottomButton">
      <el-button class="affirm" @click="centerDialogVisible = false" style="width: 47.5%;height: 100%;">取消</el-button>
      <el-button class="affirm" @click="setGroupAuth" style="width: 47.5%;height: 100%;">确认</el-button>
    </div>
  </el-dialog>

</template>

<script>
let me;
export default {
  name: "SetUserJurisdiction",
  watch: {
    filterText(val) {
      this.$refs.treeRef.filter(val);
    }
  },
  data() {
    return {
      formTitle: '配置权限',
      centerDialogVisible: false,
      filterText: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      }

    }
  },
  methods: {
    showDialog(groupId) {
      this.groupId = groupId;
      this.getMenuTreeData();
      this.centerDialogVisible = true;
    },
    async setGroupAuth() {
      let me = this;
      let childrenMenuArr = this.$refs.treeRef.getCheckedKeys();
      let parentMenuArr = this.$refs.treeRef.getHalfCheckedKeys();

      let groupId = this.groupId;
      let response = await this.$asyncPost("userGroup", {
        actionType: "setGroupAuth",
        childrenMenuArr: childrenMenuArr,
        parentMenuArr: parentMenuArr,
        groupId: groupId
      });
      if (response.success) {
        me.centerDialogVisible = false;
        me.$parent.selTableData();
        me.$message.success('成功');
      } else {
        this.$message.error(response.message);
      }
    },
    async getMenuTreeData() {
      let me = this;
      let response = await this.$asyncPost("userGroup", {
        actionType: "userGroupAuth",
        groupId: me.groupId
      });
      if (response.success) {
        me.treeData = response.data;
        me.$refs.treeRef.setCheckedKeys(response.groupMenu);
      } else {
        this.$message.error(response.message);
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.includes(value)
    }
  }
}
</script>

<style scoped lang="scss">

</style>